<template>
  <div>
    
    <el-card class="box-card Top">
      <el-button type="primary" @click="Hander" @close="rest"
        >添加分类</el-button
      >
      <!-- 树型表格插件 -->
      <tree-table
        class="tb-cate Top"
        index-text="#"
        show-index
        stripe
        border
        :data="cateList.slice((pages - 1) * pageSize, pages * pageSize)"
        :columns="columns"
        :expand-type="false"
        :selection-type="false"
      >
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            style="color: #53ce3b"
            v-if="scope.row.cat_deleted == 0"
          ></i>
          <i class="el-icon-error" v-if="scope.row.cat_deleted == 1"></i>
        </template>
        <template slot="level" scope="scope">
          <el-tag v-if="scope.row.cat_level == 0" effect="dark"> 一级 </el-tag>
          <el-tag type="success" v-if="scope.row.cat_level == 1" effect="dark"
            >二级
          </el-tag>
          <el-tag type="warning" v-if="scope.row.cat_level == 2" effect="dark"
            >三级</el-tag
          >
        </template>
        <template slot="opt" scope="scope">
          <el-button size="mini" type="primary" @click="edit(scope.row)">
            <i class="el-icon-edit">编辑</i>
            
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="DelCate(scope.row.cat_id)"
          >
            <i class="el-icon-delete">删除</i>
          </el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination
        class="Top"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 添加/编辑分类对话框 -->
      <el-dialog :title="names" :visible.sync="dialogFormVisible">
        <el-form :model="AddForm" :rules="rules" ref="AddForm">
          <el-form-item label="分类名称" prop="cat_name" label-width="100px">
            <el-input v-model="AddForm.cat_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="父级分类"
            prop="cat_pid"
            label-width="100px"
            v-if="names == '添加'"
          >
            <el-cascader
              :options="options"
              :props="Cate"
              v-model="value"
              clearable
              @change="ChangeID"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="AddsForm('AddForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {deleteclass, cate,AddCate,categories} from '@/http/api';

export default {
  name: "",
  components: {},

  data() {
    return {
      AddForm: {
        cat_pid: 0, //分类父 ID
        cat_name: "", //分类名称
        cat_level: 0, //分类层级
      },
      // 表单规则
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
        cat_pid: [{ required: true, message: "请选择父级", trigger: "blur" }],
      },
      // 联动
      options: [],
      arr: [],
      arr1: [],
      Cate: {
        checkStrictly: true,
        label: "cat_name",
        children: "children",
        value: "cat_id",
      },
      value: [],
      cateList: [],
      pages: 1,
      pageSize: 5,
      total: 0,
      dialogFormVisible: false,
      Type: [1,2,3],
      names: "",
      columns: [
        { label: "分类名称", prop: "cat_name", icon: "el-icon-arrow-right" },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "isok",
        },
        {
          label: "排序",
          prop: "cat_level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      props: {
        expandType: false,
        selectionType: false,
      },
    };
  },
  created() {
    this.Type = null;
    this.getlist();
  },
  mounted() {},
  methods: {
    async getlist() {
      const res = await categories({type:this.Type});
      
      this.cateList = res;
      this.total = res.length;
      this.options = res;
      console.log(res);
    },
    // 点击添加分类按钮
    Hander() {
      this.AddForm={}
      this.dialogFormVisible = true;
      this.Type = 2;
      this.names = "添加";
      this.getlist();
    },
    // 删除分类
    async DelCate(id) {
      let dels;
      try {
        dels = await this.$confirm(
          "此操作将永久删除该文件, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
      } catch (error) {
        dels = error;
      }
      console.log(dels);
      if (dels === "confirm") {
        const res = await deleteclass(id);
        console.log(res);
        this.getlist();
      }
    },
    edit(row) {
      this.names = "编辑";
      this.dialogFormVisible = true;
      this.AddForm = row;
      this.Com = row;
    },
 
    // 清空表单
    rest() {
      this.AddForm = {};
      this.value = [];
    },
    // 点击分类确定
    
    AddsForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.names === "添加") {
            const res = await AddCate(this.AddForm);
            console.log(res);
          } else {
            let { cat_name, cat_id } = this.Com;
            const res = await cate(cat_id, {
              cat_name: cat_name,
            });
            console.log(res);
          }
          console.log(this.AddForm);
          this.dialogFormVisible = false;

          this.getlist();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 联级
    ChangeID(val) {
      console.log(this.value);
      console.log(this.options);
  if (this.value.length !== 0) {
        //父pid
        this.AddForm.cat_pid  = this.value[this.value.length  - 1]
        //当前分类级别
      this.AddForm.cat_level = this.value.length
      } else {
        this.AddForm.cat_pid = 0
      this.AddForm.cat_level = 0
      }
      // console.log(this.AddForm);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pages = val;
      this.getlist();
    },
  },
};
</script>
<style scoped lang='scss'>
.Top {
  margin-top: 30px;
}
</style>
